<template>
    <div class="fun-box">
        <div class="item" v-for="it in List" :key="it.title">
            <span class="title">{{it.title}}</span>
            <div class="content">
                <div class="func-item"
                    v-for="item in it.func"
                    :key="item.name"
                    @click="itemEvt(item)"
                >
                    <i :class="['icon', item.icon]"></i>
                    <span class="name">{{item.name}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import { ref,reactive,onMounted } from "vue";
    import { showToast } from 'vant';
    import { useRouter } from "vue-router";
    import { showSuccessToast, showFailToast } from 'vant';
import { commonDefinition } from "../../store";
    let router = useRouter()

    const List = reactive([
        {
            title:'采购管理',
            func:[
                {name:'采购管理',icon:'purchase',id: "PURCHASE-01-01", right: 'R',path:'/purchase/list'},
                {name:'采购新建',icon:'purchase-new',id:"PURCHASE-01-02", right: 'C',path:'/purchase/edit'}
            ]
        },
        {
            title:'项目管理',
            func:[
                {name:'项目管理',icon:'project',id: "SYSTEM-01-05", right: 'R',path:'/project/list'},
                {name:'项目新建',icon:'project-new',id: "SYSTEM-01-05", right: 'C',path:'/project/edit'}
            ]
        },
        {
            title: '收货管理',
            func: [
                {icon: 'receipt-new', name: '收货管理'},
                {icon: 'receipt', name: '收货新建'}
            ]
        },
        {
            title:'基础数据',
            func:[
                { icon: 'setup', name: '材料管理'},
                { icon: 'material', name: '材料新建'},
                {icon: 'supplier', name: '供应商管理'},
                {icon: 'supplier-new', name: '供应商新建'}
            ]
    
        },
    ])
    var userRights = commonDefinition().getUserRights
    function itemEvt(item){
        let myRight = userRights.find(it => it.id === item.id)
        if(!!myRight && myRight.role.includes(item.right)){
            if(!!item.path){
                router.push(item.path)
            }else{
                    showToast('\n此模块暂时还未开发~\n'+'\n' )
                }
        }else{
            showFailToast(('\n此模块暂时还未开发~\n'+'\n' ))
        }
    }

</script>
<style lang="less" scoped>
    @import '../../style/common.less';
    .fun-box{
        position: relative;
        // height: calc( 100% - 150px );
        width: 100%;
        background: white;
        border-radius: 5px;
        >.item{
            position: relative;
            display: block;
            width: 100%;
            margin-bottom: 10px;
            overflow: hidden;
            >.title{
                display: block;
                padding: 0 0 9px 9px;
                margin-left: 10px;
                margin-top: 10px;
                border-left: 3px solid @b03;
                color: @g09;
                margin-bottom: 10px;
                border-bottom: 2px solid @g02;
                font-size: 0.9rem;
            }
            >.content{
                display: flex;
                padding: 0 0 9px 0;
                // margin-left: 10px;
                flex-wrap: wrap;
                >.func-item{
                    flex: 0 0 25%;
                    // margin-bottom: 10px;
                    >.icon{
                        display: block;
                        height: 56px;
                        width: 64px;
                        margin: auto;
                        background-position: center;
                        background-size: 42px;
                        background-repeat: no-repeat;
                        .loop(1);
                    }
                    >.name{
                        display: block;
                        font-size: 0.8rem;
                        margin: auto;
                        text-align: center;
                        color: @g07;
                    }
                }
            }
        }
    }
    @arr:purchase purchase-new project project-new receipt-new receipt setup material supplier supplier-new;

    .loop(@index) when(@index <= length(@arr)) {
        @name: extract(@arr, @index);
        &.@{name} {
            background-image: url("../../images/icons/@{name}.png");
        }
        /** 递归调用 */
        .loop(@index + 1);
    }
</style>